<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Demo Index</title>
</head>
<body>
<div id="greeting"></div>
<div id="root"></div>
<a href="tic-tac-toe/game">Tic-Tac-Toe</a>
<script src="scripts/react.min.js"></script>
<script src="scripts/react-dom.min.js"></script>
<script src="dist/js/page/greeting.bundle.js"></script>

<%--下面是一个不打包的试验，直接引入babel的脚本，在客户端翻译ES6代码，性能明显下降--%>
<%--<script src="dist/js/page/index.bundle.js"></script>--%>
<script src="scripts/browser.min.js"></script>
<script type="text/babel">
    function Welcome(props) {
        return <h1>Hello, {props.name}</h1>;
    }

    function App() {
        return (
                <div>
                    <Welcome name="Sara"/>
                    <Welcome name="Cahal"/>
                    <Welcome name="Edite"/>
                </div>
        );
    }

    ReactDOM.render(
            <App />,
            document.getElementById('root')
    );
</script>
</body>
</html>
